<template>
  <div class="search-input">
      <div class="input-wrapper">
          <span class="iconfont icon-header-search"></span>
          <input type="text" class="input" v-model="keyword" @input="onSearch" :placeholder="placeholder">
      </div>
  </div>
</template>

<script>
export default {
  name: 'SearchInput',
  data () {
      return {
          placeholder: '美食 / 景点 / 酒店 / 按摩 / KTV',
          keyword: ''
      }
  },
  methods: {
      onSearch () {
          console.log(this.keyword)
      }
  }
}
</script>

<style lang="scss" scoped>
.search-input {
    height: .44rem;
    padding: .06rem .15rem;
    background-color: #fff;
    box-sizing: border-box;

    .input-wrapper {
        position: relative;
        height: 100%;
        width: 100%;

        .iconfont {
            position: absolute;
            top: .08rem;
            left: .08rem;
            font-size: .16rem;
        }

        .input {
            width: 100%;
            height: 100%;
            border: 1px solid #ddd;
            border-radius: .03rem;
            box-sizing: border-box;
            font-size: .14rem;
            text-indent: .32rem;
        }
    }
}
</style>